import 'package:cached_network_image/cached_network_image.dart';
import 'package:card_topia/common_widget/my_refresh_header.dart';
import 'package:card_topia/design_specifications.dart';
import 'package:card_topia/my_router.dart';
import 'package:card_topia/pages/home_page/goods_detail_page.dart';
import 'package:card_topia/pages/home_page/home_page.dart';
import 'package:custom_refresh_indicator/custom_refresh_indicator.dart';
import 'package:extended_nested_scroll_view/extended_nested_scroll_view.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:pull_to_refresh_flutter3/pull_to_refresh_flutter3.dart';

///推荐页

class RecommendPage extends StatefulWidget {
  const RecommendPage({super.key});

  @override
  State<RecommendPage> createState() => _RecommendPageState();
}

class _RecommendPageState extends State<RecommendPage> {
  RefreshController _refreshController = RefreshController();
  ScrollController _scrollController = ScrollController();
  final _list = [
    "a",
    "b",
    "c",
    "c",
    "c",
    "c",
    "c",
  ];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // _refreshController.onPositionUpdated(_scrollController.position);
    _scrollController.addListener(() {
      _refreshController.position = _scrollController.position;
      _refreshController.position?.jumpTo(_scrollController.position.pixels);
    });
  }

  @override
  Widget build(BuildContext context) {
    return SmartRefresher(
      controller: _refreshController,
      header: CustomHeader(builder: (context,status)=>RefreshHeader(status: status,),),
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 16.w),
        child: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                margin: EdgeInsets.only(top: 16.w, bottom: 16.w),
                child: Row(
                  children: [KingItem(text: "排行榜", src: "assets/rank.png")],
                ),
              ),
              MasonryGridView.count(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                crossAxisCount: 2,
                crossAxisSpacing: 8.w,
                mainAxisSpacing: 8.w,
                itemCount: _list.length,
                itemBuilder: (BuildContext context, int index) {
                  return InkWell(
                      onTap: ()=>MyRouter.push(page: GoodsDetailPage()),
                      child: RecommendCard(index: index));
                },

              )
            ],
          ),
        ),
      ),
    );
  }
}

class RecommendCard extends StatelessWidget {
  const RecommendCard({super.key, required this.index});

  final int index;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8.w)
      ),
      child: Column(
        children: [
          ClipRRect(
            borderRadius: BorderRadius.only(topLeft: Radius.circular(8.w),topRight: Radius.circular(8.w)),
            child: CachedNetworkImage(
              height: index%2==0?220.w:160.w,
              width: double.infinity,
              imageUrl:
                  "https://gw.alicdn.com/imgextra/i2/1030684261/O1CN01j5BUlg1hLaVAMXuXx_!!1030684261.jpg_Q75.jpg_.webp",
              fit: BoxFit.cover,
            ),
          ),
          Container(
            padding: EdgeInsets.only(top: 8.w, bottom: 8.w,left: 8.w,),
            alignment: Alignment.centerLeft,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  "[三国无双联名]限量版盲盒Z系列",
                  style: TextStyle(
                      fontSize: 14.sp, color: textColor, fontFamily: harmony),
                ),
                SizedBox(height: 4.w,),
                Row(
                  children: [
                    Text(
                      "10张/袋",
                      style: TextStyle(
                          fontSize: 12.sp, color: descColor, fontFamily: harmony),
                    ),
                    SizedBox(width: 8.w,),
                    Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(4.w),
                        border: Border.all(color: Colors.orange)
                      ),
                      padding: EdgeInsets.symmetric(horizontal: 4.w,vertical: 1.w),
                      child: Text("限量2000份",style: TextStyle(fontSize: 10.sp,color: Colors.orange),),
                    )
                  ],
                ),
                SizedBox(height: 8.w,),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Text("¥28",style: TextStyle(
                      fontSize: 16.sp,
                      fontFamily: harmony,
                      color: textColor,
                      fontWeight: FontWeight.bold,
                      height: 1
                    ),),
                    SizedBox(width: 8.w,),
                    Text("¥33",style: TextStyle(
                      fontSize: 12.sp,
                      fontFamily: harmony,
                      color: disableColor,
                      decoration: TextDecoration.lineThrough,
                      height: 1.3
                    ),)
                  ],
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}
